<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid布局</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <h2>示例1：简单Grid布局</h2>
  <div class="grid-wrap grid-box-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <h2>示例2：Gird隐式网格</h2>
  <div class="grid-wrap grid-box-2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>

  <h2>示例3：占多行多列与网格线别名</h2>
  <div class="grid-wrap grid-box-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

  <h2>示例4：gap间距</h2>
  <div class="grid-wrap grid-box-3 grid-gap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

  <h2>示例5：不确定宽度容器，自动填充子元素</h2>
  <div class="grid-wrap grid-box-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>

  <h2>示例6：网格模板区域</h2>
  <div class="grid-wrap grid-box-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

  <h2>示例7：布局算法</h2>
  <div class="grid-wrap grid-box-7">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>

  <h2>示例8：元素的对齐（打开控制台查看网格与内容的对齐关系）</h2>

  <h3>justify-items: 垂直方向（列纬度）的子元素在自己空间的对齐</h3>
  <h4>justify-items: start</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-items grid-box-justify-items-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-items: center</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-items grid-box-justify-items-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-items: end</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-items grid-box-justify-items-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-items: stretch</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-items grid-box-justify-items-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <h3>align-items: 水平方向（行纬度）的子元素在自己空间的对齐</h3>
  <h4>align-items: start</h4>
  <div class="grid-wrap grid-box-align grid-box-align-items grid-box-align-items-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-items: center</h4>
  <div class="grid-wrap grid-box-align grid-box-align-items grid-box-align-items-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-items: end</h4>
  <div class="grid-wrap grid-box-align grid-box-align-items grid-box-align-items-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-items: stretch</h4>
  <div class="grid-wrap grid-box-align grid-box-align-items grid-box-align-items-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-items: baseline（文字基线对齐）</h4>
  <div class="grid-wrap grid-box-align grid-box-align-items grid-box-align-items-baseline">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <h3>justify-content: 垂直方向（列纬度）上，子元素在容器空间中的对齐</h3>
  <h4>justify-content: start</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: center</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: end</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: stretch</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: space-around</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: space-between</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>justify-content: space-evenly</h4>
  <div class="grid-wrap grid-box-align grid-box-justify-content grid-box-justify-content-space-evenly">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <h3>align-content: 水平方向（行纬度）上，子元素在容器空间中的对齐</h3>
  <h4>align-content: start</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: center</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: end</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: stretch</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: space-around</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: space-between</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <h4>align-content: space-evenly</h4>
  <div class="grid-wrap grid-box-align grid-box-align-content grid-box-align-conent-space-evenly">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <h3>justify-self 和 align-seld 用在子元素上，覆盖父级的 justify-items 和 align-items</h3>
</body>
</html>